<script setup lang="ts">

import Card from "@/components/Card.vue";
import {ref} from "vue";

const isShow=ref(false);

</script>

<template>
  <card title="Transition">
    <n-button @click="isShow=!isShow">切换</n-button>
    <transition name="fade">
       <p v-show="isShow">Hello</p>
    </transition>
  </card>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active, /*命名fade作为前缀*/
.v-enter-active,.v-leave-active { transition: opacity 2.5s ease;}

.fade-enter, .fade-leave-to, /*命名fade作为前缀*/
.v-enter-from,.v-leave-to {  opacity: 0;  height: 0;}
</style>